import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import { Card, Col, Row } from 'antd'
import queryString from 'query-string'
import List from './List'
import TaskNodeList from './TaskNodeList'
import Modal from './Modal'
import TaskNodeModal from './TaskNodeModal'
import Filter from './Filter'
import { config } from '../../utils'
import { Select } from 'antd/lib/index'

const { api } = config
const { processDefinition } = api
const Option = Select.Option
const Deploy = ({ location, dispatch, deploy, loading }) => {
  location.query = queryString.parse(location.search)
  const { list, pagination, currentItem, modalVisible, modalType } = deploy
  const { isMotion, systemProcessList, processTypeList, file } = deploy
  const { deploySelected } = deploy
  const { taskNodeList } = deploy
  const { taskModalVisible } = deploy
  const { approveTypeCheckedValue } = deploy
  const { accountTreeData } = deploy
  const { jobTreeData } = deploy
  const { systemCode } = deploy
  const { taskNode } = deploy
  const { booleanApproveType } = taskNode.approveType === 1
  const { pageSize } = pagination
  const cascaderProps = {
    options: systemProcessList,
    changeOnSelect: false,
    allowClear: true,
    // onPopupVisibleChange: (value) => {
    //   if (!value) {
    //     dispatch({
    //       type: 'deploy/reloadSelection',
    //       payload: {},
    //     })
    //   }
    // },
    loadData: (selectOption) => {
      dispatch({
        type: 'deploy/listProcessType',
        payload: selectOption,
      })
    },
    onChange: (value, selectedOptions) => {
      console.log(value, selectedOptions)
    },
  }
  const modalProps = {
    dispatch,
    cascaderProps,
    systemProcessListOption: systemProcessList.map(systemprocessItem => (<Option
      key={systemprocessItem.appId}
    >{systemprocessItem.appName}</Option>)),
    processTypeListOption: processTypeList.map(processTypeItem => (<Option
      key={processTypeItem.id}
    >{processTypeItem.bizName}</Option>)),
    item: modalType === 'create' ? {} : currentItem,
    visible: modalVisible,
    maskClosable: false,
    confirmLoading: loading.effects['deploy/deploy'],
    title: `${modalType === 'create' ? '部署流程' : 'Update Deploy'}`,
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      dispatch({
        type: 'deploy/deploy',
        payload: { data, file },
      })
    },
    onCancel () {
      dispatch({
        type: 'deploy/hideModal',
      })
    },
    onSystemSelectChange (data) {
      dispatch({
        type: 'deploy/selectProcessTypeBySystemSelect',
        payload: data,
      })
    },
  }
  const taskNodeModalProps = {
    dispatch,
    cascaderProps,
    jobTreeData,
    accountTreeData,
    approveTypeCheckedValue,
    item: modalType === 'create' ? {} : currentItem,
    taskNode,
    booleanApproveType,
    visible: taskModalVisible,
    maskClosable: false,
    confirmLoading: loading.effects['deploy/configTaskNode'],
    title: `${modalType === 'create' ? '配置节点' : 'Update Deploy'}`,
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      dispatch({
        type: 'deploy/configTaskNode',
        payload: { data },
      })
    },
    onCancel () {
      dispatch({
        type: 'deploy/hideTaskNodeModal',
      })
    },
  }

  const listProps = {
    dataSource: list,
    loading: loading.effects['deploy/query'],
    pagination,
    location,
    isMotion,
    goConfigItem (item) {
      dispatch(routerRedux.push({
        pathname: '/processconfig',
        query: {
          ...item,
        },
      }))
    },
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        query: {
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        },
      }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'deploy/delete',
        payload: id,
      })
    },
    onEditItem (item) {
      let win = window.open(`${processDefinition}/${item.procDefId}/diagram`, '_blank')
      win.focus()
    },
    onRowClick (record) {
      dispatch({
        type: 'deploy/deploySelected',
        payload: record,
      })
    },
  }
  const taskNodeListProps = {
    dataSource: taskNodeList,
    location,
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        query: {
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        },
      }))
    },
    onEditItem (item) {
      let win = window.open(`${processDefinition}/${item.procDefId}/diagram`, '_blank')
      win.focus()
    },
    clickConfigTaskNode (payload) {
      dispatch({
        type: 'deploy/taskNodeConfig',
        payload,
      })
    },
    clickStartTaskNode (payload) {
      dispatch({
        type: 'deploy/clickStartTaskNode',
        payload,
      })
    },
  }
  const filterProps = {
    isMotion,
    filter: {
      ...location.query,
    },
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
        query: {
          ...value,
          page: 1,
          pageSize,
        },
      }))
    },
    onSearch (fieldsValue) {
      fieldsValue.keyword.length ? dispatch(routerRedux.push({
        pathname: '/deploy',
        query: {
          field: fieldsValue.field,
          keyword: fieldsValue.keyword,
        },
      })) : dispatch(routerRedux.push({
        pathname: '/deploy',
      }))
    },
    onAdd () {
      dispatch({
        type: 'deploy/showModal',
        payload: {
          modalType: 'create',
          dispatch,
        },
      })
    },
    switchIsMotion () {
      dispatch({ type: 'deploy/switchIsMotion' })
    },
  }

  return (
    <div>
      <Row gutter={0}>
        <Card title="已部署流程">
          <Col lg={12} md={12}>
            <Filter {...filterProps} />
          </Col>
          <Col lg={24} md={24}>
            <List {...listProps} />
            {modalVisible && <Modal {...modalProps} />}
          </Col>
        </Card>
      </Row>
      <Row gutter={0}>
        <Col lg={24} md={24}>
          <Card
            title={`租户${deploySelected.systemCode ? deploySelected.systemCode : ''},流程${deploySelected.procDefId ? deploySelected.procDefId : ''},配置节点`}
          >
            <TaskNodeList {...taskNodeListProps} />
            {taskModalVisible && <TaskNodeModal {...taskNodeModalProps} />}
          </Card>
        </Col>
      </Row>
    </div>
  )
}

Deploy.propTypes = {
  deploy: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ deploy, loading }) => ({ deploy, loading }))(Deploy)
